<template>
  <!-- 访客记录-详情 -->
  <div>
    <public-modal
      width="1000px"
      :footer="false"
      title="详情页"
      modalStyle="detailModal"
      :publicVisible="publicVisible"
      cancelContext="拒绝"
      confirmContext="通过"
      @cancel="cancel"
    >
      <div slot="content">
        <!--  基本信息 -->
        <div class="base-info-wrap">
          <div class="common-title">
            <div class="icon"></div>
            <div class="content">基本信息</div>
          </div>

          <div class="content-wrapper">
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">单位名称</div>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ companyInfo.companyName || '暂无' }} </span>
                  </template>
                  <div class="value common-value">{{ companyInfo.companyName || '暂无' }}</div>
                </a-tooltip>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">所属行业</div>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ informationInfo.informationName || '暂无' }} </span>
                  </template>
                  <div class="value common-value">{{ informationInfo.informationName || '暂无' }}</div>
                </a-tooltip>
              </div>
            </div>

            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">门头照片</div>
                <div class="value common-value">
                  {{ outlookPhoto == '' ? '未完善' : '已完善' || '暂无' }}
                  <span class="click-color cursor" v-if="outlookPhoto !== ''" @click="werImg(outlookPhoto)"
                    >查看大图</span
                  >
                  <img
                    :id="outlookPhoto"
                    :src="`${imgPrefix + outlookPhoto}`"
                    :data-original="`${imgPrefix + outlookPhoto}`"
                  />
                </div>
              </div>

              <div class="info-wrap f1">
                <div class="label common-lable">内部照片</div>
                <div class="value common-value">
                  {{ insideLookPhoto.length == 0 ? '未完善' : '已完善' || '暂无' }}
                  <span
                    class="click-color cursor"
                    v-if="insideLookPhoto.length != 0"
                    @click="werImg2('insideLookPhoto')"
                    >查看大图</span
                  >

                  <ul id="insideLookPhoto" style="display: none">
                    <li v-for="(item, index) in insideLookPhoto" :key="index">
                      <img :src="imgPrefix + item.path" :data-original="imgPrefix + item.path" />
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            <div>
              <div class="info-wrap">
                <div class="label common-lable">营业地址</div>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ companyInfo.addressDetail || '暂无' }} </span>
                  </template>
                  <div class="value common-value">{{ companyInfo.addressDetail || '暂无' }}</div>
                </a-tooltip>
              </div>
            </div>

            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">营业执照信息</div>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ companyInfo.businessName || '暂无' }} </span>
                  </template>
                  <div class="value common-value">{{ companyInfo.businessName || '暂无' }}</div>
                </a-tooltip>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">营业执照</div>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ companyInfo.businessStatus == 0 ? '未完善' : '已完善' || '暂无' }} </span>
                  </template>
                  <div class="value common-value">
                    {{ companyInfo.businessStatus == 0 ? '未完善' : '已完善' || '暂无' }}
                    <span
                      class="click-color cursor"
                      v-if="companyInfo.businessStatus == 1"
                      @click="showBusinessDetail(companyInfo.id)"
                      >点击查看详情</span
                    >
                  </div>
                </a-tooltip>
              </div>
            </div>

            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">统一社会信用代码</div>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ companyInfo.creditCode || '暂无' }} </span>
                  </template>
                  <div class="value common-value">{{ companyInfo.creditCode || '暂无' }}</div>
                </a-tooltip>
              </div>
              <!-- <div class="info-wrap f1">
                <div class="label common-lable">特殊行业许可证信息</div>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ companyInfo.certificateStatus == 0 ? '未完善' : '已完善' || '暂无' }} </span>
                  </template>
                  <div class="value common-value">
                    {{ companyInfo.certificateStatus == 0 ? '未完善' : '已完善' || '暂无' }}
                    <span
                      class="click-color cursor"
                      v-if="companyInfo.certificateStatus == 1"
                      @click="showCertificateDetail(companyInfo.id)"
                      >点击查看详情</span
                    >
                  </div>
                </a-tooltip>
              </div> -->
            </div>
          </div>
        </div>

        <!--  法人信息 -->
        <div class="base-info-wrap">
          <div class="common-title">
            <div class="icon"></div>
            <div class="content">法人信息</div>
          </div>

          <div class="content-wrapper">
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">法人姓名</div>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ legalInfo.legalPersonName || '暂无' }} </span>
                  </template>
                  <div class="value common-value">{{ legalInfo.legalPersonName || '暂无' }}</div>
                </a-tooltip>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">身份证照片</div>
                <div
                  class="value common-value click-color cursor"
                  @click="werImg('minImg2')"
                  v-if="legalInfo.personImage"
                >
                  点击查看法人照片
                  <img
                    id="minImg2"
                    :src="`${imgPrefix + legalInfo.personImage}`"
                    :data-original="`${imgPrefix + legalInfo.personImage}`"
                  />
                </div>
                <div class="value common-value" v-else>暂无</div>
              </div>
            </div>

            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">手机号码</div>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ legalInfo.mobile || '暂无' }} </span>
                  </template>
                  <div class="value common-value">{{ legalInfo.mobile || '暂无' }}</div>
                </a-tooltip>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">身份证号</div>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ legalInfo.idCard || '暂无' }} </span>
                  </template>
                  <div class="value common-value">{{ legalInfo.idCard || '暂无' }}</div>
                </a-tooltip>
              </div>
            </div>

            <div>
              <div class="info-wrap">
                <div class="label common-lable">户籍地址</div>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ legalInfo.residenceDetail || '暂无' }} </span>
                  </template>
                  <div class="value common-value">{{ legalInfo.residenceDetail || '暂无' }}</div>
                </a-tooltip>
              </div>
            </div>
          </div>
        </div>

        <!--  安全负责人 -->
        <div class="base-info-wrap">
          <div class="common-title">
            <div class="icon"></div>
            <div class="content">安全负责人</div>
          </div>

          <div class="content-wrapper">
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">安全负责人</div>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ dutyPersonInfo.dutyPersonName || '暂无' }} </span>
                  </template>
                  <div class="value common-value">{{ dutyPersonInfo.dutyPersonName || '暂无' }}</div>
                </a-tooltip>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">身份证照片</div>
                <div
                  class="value common-value click-color cursor"
                  @click="werImg('minImg')"
                  v-if="dutyPersonInfo.personImage"
                >
                  点击查看安全负责人照片
                  <img
                    id="minImg"
                    :src="`${imgPrefix + dutyPersonInfo.personImage}`"
                    :data-original="`${imgPrefix + dutyPersonInfo.personImage}`"
                  />
                </div>
                <div class="value common-value" v-else>暂无</div>
              </div>
            </div>

            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">手机号码</div>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ dutyPersonInfo.mobile || '暂无' }} </span>
                  </template>
                  <div class="value common-value">{{ dutyPersonInfo.mobile || '暂无' }}</div>
                </a-tooltip>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">身份证号</div>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ dutyPersonInfo.idCard || '暂无' }} </span>
                  </template>
                  <div class="value common-value">{{ dutyPersonInfo.idCard || '暂无' }}</div>
                </a-tooltip>
              </div>
            </div>

            <div>
              <div class="info-wrap">
                <div class="label common-lable">户籍地址</div>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ dutyPersonInfo.residenceDetail || '暂无' }} </span>
                  </template>
                  <div class="value common-value">{{ dutyPersonInfo.residenceDetail || '暂无' }}</div>
                </a-tooltip>
              </div>
            </div>
          </div>
        </div>

        <!--  审核信息 -->
        <div class="base-info-wrap">
          <div class="common-title">
            <div class="icon"></div>
            <div class="content">审核信息</div>
          </div>

          <div class="content-wrapper">
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">拒绝时间</div>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ auditInfo.auditTime || '暂无' }} </span>
                  </template>
                  <div class="value common-value">{{ auditInfo.auditTime || '暂无' }}</div>
                </a-tooltip>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">审核人员</div>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ auditInfo.auditUserName || '暂无' }} </span>
                  </template>
                  <div class="value common-value">{{ auditInfo.auditUserName || '暂无' }}</div>
                </a-tooltip>
              </div>
            </div>

            <div>
              <div class="info-wrap">
                <div class="label common-lable">拒绝理由</div>
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ auditInfo.auditMemo || '暂无' }} </span>
                  </template>
                  <div class="value common-value">{{ auditInfo.auditMemo || '暂无' }}</div>
                </a-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer"></div>
    </public-modal>
    <certificate-detail ref="certificateDetail"></certificate-detail>
    <business-detail ref="businessDetail"></business-detail>
  </div>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import certificateDetail from '../certificateDetail'
import businessDetail from '../businessDetail'
import publicModal from '@/components/publicModal'
import { companyRecord } from '@/api/company'
import { comMethods } from '@/mixins/comMethods'
import { getAction } from '@/api/manage'
export default {
  name: 'detailModal',
  components: { publicModal, certificateDetail, businessDetail },
  mixins: [comMethods],
  data() {
    return {
      records: {},
      imgPrefix: '',
      publicVisible: false,

      outlookPhoto: '',
      insideLookPhoto: [],

      auditInfo: {},
      legalInfo: {},
      dutyPersonInfo: {},
      companyInfo: {},
      informationInfo: {},
      policeUserInfo: {},
      policeAgencyInfo: {},
      policeJurisdictionInfo: {},
    }
  },

  methods: {
    show(records) {
      this.publicVisible = true
      this.records = records
      let params = {
        id: records.companyMessageId,
        companyChangeRecordId: records.companyChangeRecordId,
      }
      this.getRecord(params)
    },

    async getRecord(params) {
      let {
        result: {
          auditInfo,
          legalInfo,
          dutyPersonInfo,
          companyInfo,
          informationInfo,
          policeUserInfo,
          policeAgencyInfo,
          policeJurisdictionInfo,
        },
      } = await companyRecord(params)
      this.auditInfo = auditInfo
      this.legalInfo = legalInfo
      this.dutyPersonInfo = dutyPersonInfo
      this.companyInfo = companyInfo
      this.informationInfo = informationInfo
      this.policeUserInfo = policeUserInfo
      this.policeAgencyInfo = policeAgencyInfo
      this.policeJurisdictionInfo = policeJurisdictionInfo

      this.getCompanyPhoto(companyInfo.id)
    },

    async getCompanyPhoto(id) {
      let { result: outlookPhoto } = await getAction('/sys/images_path/list', { bizId: id, bizType: 4 })
      let { result: insideLookPhoto } = await getAction('/sys/images_path/list', { bizId: id, bizType: 5 })
      this.outlookPhoto = outlookPhoto.length > 0 ? outlookPhoto[0].path : ''
      this.insideLookPhoto = insideLookPhoto
    },

    cancel(target) {
      this.publicVisible = false
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    werImg2(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: true,
        button: true,
        navbar: true,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    showBusinessDetail(id) {
      this.$refs.businessDetail.show(id)
    },

    showCertificateDetail(id) {
      this.$refs.certificateDetail.show(id)
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}

img {
  display: none;
}
</style>
